<template>
	<div class="semi-circle-progress">
		<div class="semi-progress-container" ref="chartContainer"></div>
		<div class="semi-progress-text">
			<div class="semi-progress-text-value mt-1">
				{{ value }}
			</div>
			<div class="semi-progress-text-title">
				{{ strategyName }}
			</div>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts/core';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([GaugeChart, CanvasRenderer]);

export default {
  name: "SemiCircleProgress",
  props: {
    value: {
      type: Number,
      default: 80,
      validator: v => v >= 0 && v <= 100
    },
	strategyType: {
      type: Number,
      default: 2,
      validator: v => v == 1 || v == 2 || v == 3
    }
  },
  data() {
    return {
      chart: null,
      option: {
				series: [{
					type: 'gauge',
					startAngle: 180,
					endAngle: 0,
					min: 0,
					max: 100,
					center: ['50%', '85%'],
					radius: '150%',
					pointer: {
						show: true,
						icon: 'circle',
						length: '190%',  // 调整圆点位置到轨道末端
						width: 10,
						itemStyle: {
							color: '#F7A600',  // 修改内部颜色
							borderColor: '#FFF',  // 修改包边颜色
							borderWidth: 3,  // 确保边框宽度足够
							shadowColor: 'rgba(0,0,0,0.5)',
							shadowBlur: 6
						}
					},
					axisLine: {
						lineStyle: { 
								width: 8,
								color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
										{ offset: 0, color: 'rgba(255,64,64,1)' },
										{ offset: 0.3, color: 'rgba(255,127,36,1)' },
										{ offset: 0.6, color: 'rgba(255,215,0,1)' },
										{ offset: 1, color: 'rgba(0,238,118,1)' }
								])]]
						}
					},
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: { show: false },
        }]
				
      }
    }
  },
  computed: {
	strategyName() {
		if(this.strategyType == 3) {
			// return this.$t("做空");
			return this.$t("恐惧")
		} else if(this.strategyType == 2) {
			// return this.$t("震荡");
			return this.$t("恐惧")
		} else if(this.strategyType == 1) {
			// return this.$t("做多");
			return this.$t("贪婪")
		}
	}
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.updateChart();
    },
    updateChart() {
      this.option.series[0].data = [{ value: this.value }];
      this.chart.setOption(this.option);
    }
  },
  watch: {
    value() {
      this.updateChart();
    }
  }
};
</script>

<style scoped lang="less">
.semi-circle-progress{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.semi-progress-container{
	width: 100%;
}
.semi-progress-text{
	position: absolute;
}
.semi-progress-text-value{
	font-size: 1.8rem;
	font-weight: 600;
	color	: #F7A600;
}
.semi-progress-text-title{
	font-size: 0.8rem;
	font-weight: 500;
	color	: #F7A600;
}
</style>